<template>
    <require from="./em-chat-content-item.css"></require>
    <div repeat.for="item of chats" show.bind="!item._hidden"
        class="em-chat-content-item comment item ${item.id == markId ? 'active' : ''}" data-id="${item.id}"
        data-index.bind="$index" data-first.bind="$first" data-last.bind="$last"
        task.bind="notifyRendered($last, item)">
        <em-user-avatar user.bind="item.creator" search-on.bind="!0"></em-user-avatar>
        <div class="content">
            <a class="author" data-value="${item.creator.username}"
                click.delegate="creatorNameHandler(item)">${item.creator.username == loginUser.username ? '我' :
                (item.creator.name ? item.creator.name : item.creator.username)}</a>
            <div if.bind="item._show" class="metadata">
                <i if.bind="item.ua" class="${item.ua | ua} icon large" style="margin-right: 0;"
                    title="发自于${item.ua | ua2}"></i>
                <div class="date" style="cursor: pointer;" dblclick.delegate="dateDblclickHandler(item)"
                    data-timeago="${item.createDate}" title="${item.createDate | date}">${item.createDate | timeago}
                </div>
                <div class="tms-clipboard" style="cursor: pointer;"
                    data-clipboard-text="${basePath + '#/chat/' + (isAt ? ('@' + loginUser.username) : channel.name) + '?id=' + item.id}"
                    title="复制沟通消息分享链接">#${item.id}</div>
                <a if.bind="!item._stowed" click.delegate="stowHandler(item)" class="tms-stow" title="收藏该消息"><i
                        class="empty star link icon"></i></a>
                <a if.bind="item._stowed" click.delegate="stowHandler(item)" class="tms-unstow"
                    title="取消收藏该消息"><i class="star link icon"></i></a>
                <a if.bind="!isAt && item._pined" click.delegate="pinHandler(item)" class="tms-pin" title="解除固定频道消息"><i
                        class="pin link icon"></i></a>
                <a if.bind="!isAt && item.openEdit" click.delegate="openEditHandler(item, $event, editTxtRef)"
                    class="tms-pin" title="开放协作编辑中"><i class="write link icon"></i></a>
                <template if.bind="item._hovered">
                    <div ref="alarmRef" task.bind="initAlarmHander(alarmRef)" class="tms-alarm"><i
                            class="link alarm outline icon"></i></div>
                    <div class="ui popup right center transition hidden">
                        <div class="content">
                            <div class="ui mini blue inverted buttons">
                                <button repeat.for="alarm of alarms" class="ui button" data-tooltip="${alarm.tip}"
                                    click.delegate="alarmHandler(alarm, item)">${alarm.label}</button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div data-id="${item.id}" data-case="chat" ref="mkbodyRef" fancybox show.bind="!item.isEditing"
                class="text markdown-body fr-view" innerhtml.bind="item.content | parseMd:channel | emoji:mkbodyRef">
            </div>
            <div class="textcomplete-container" show.bind="item.isEditing">
                <div class="append-to"></div>
            </div>
            <textarea ref="editTxtRef" data-id="${item.id}" textcomplete.bind="{users: members, channel: channel}"
                pastable.bind="item.uuid" autosize dropzone="at-id.bind: item.uuid"
                keydown.trigger="eidtKeydownHandler($event, item, editTxtRef)" show.bind="item.isEditing"
                value.bind="item.content & oneWay" class="tms-edit-textarea" rows="1"></textarea>
            <div show.bind="item.isEditing" class="ui compact icon buttons tms-edit-actions">
                <button click.delegate="editOkHandler($event, item, editTxtRef)" title="保存 (ctrl+enter)"
                    class="ui left attached compact icon button">
                    <i class="checkmark icon"></i>
                </button>
                <button click.delegate="editCancelHandler($event, item, editTxtRef)" title="取消 (esc)"
                    class="ui attached compact icon button">
                    <i class="remove icon"></i>
                </button>
                <button dropzone="clickable.bind: !0; target.bind: editTxtRef; at-id.bind: item.uuid" title="上传 (ctrl+u)"
                    class="ui right attached compact icon button">
                    <i class="upload icon"></i>
                </button>
            </div>
            <div if.bind="item._show && item.__hovered" class="actions">
                <a if.bind="!isAt && (item.creator.username != loginUser.username)" click.delegate="replyHandler(item)"
                    class="tms-reply" title="回复消息"><i class="large reply icon link"></i></a>
                <a if.bind="item.openEdit || (item.creator.username == loginUser.username)"
                    click.delegate="editHandler(item, editTxtRef)" class="tms-edit" title="编辑消息(ctrl+shift+dblclick)"><i
                        class="large link edit icon"></i></a>
                <a if.bind="!isAt" click.delegate="talkHandler(item, $event)" class="tms-reply" title="话题讨论"><i
                        class="large talk outline icon link"></i></a>
                <em-chat-share chat.bind="item" channel.bind="channel" is-at.bind="isAt" login-user.bind="loginUser">
                </em-chat-share>
                <div ui-dropdown-hover-action=".tms-comments-container" class="ui top right pointing dropdown">
                    <a class="text" title="更多操作"><i class="ellipsis horizontal large icon"></i></a>
                    <div class="menu">
                        <div class="item" if.bind="!isAt && (item.creator.username == loginUser.username)"
                            click.delegate="openEditHandler(item)" title="${item.openEdit ? '关闭协作编辑' :'开启协作编辑'}"><i
                                class="write icon"></i> ${item.openEdit ? '关闭协作编辑' :'开启协作编辑'}</div>
                        <div class="item tms-clipboard" data-clipboard-text="${item.content}" title="复制消息内容到剪贴板"><i
                                class="icon copy"></i> 复制到剪贴板</div>
                        <div class="item" if.bind="!isAt" click.delegate="pinHandler(item)"
                            title="${item._pined ? '解除固定频道消息' : '固定至频道消息'}"><i class="pin icon"></i> ${item._pined ?
                            '解除固定频道消息' : '固定至频道消息'}</div>
                        <div class="item" if.bind="!isAt && (channel.creator.username == loginUser.username)"
                            click.delegate="noticeHandler(item)" title="${item.notice ? '解除公告消息' : '发布为公告消息'}"><i
                                class="announcement icon"></i> ${item.notice ? '解除公告消息' : '发布为公告消息'}</div>
                        <a target="_blank" href="#/blog/create?${isAt ? 'cdid' : 'ccid'}=${item.id}"
                            style="display: block; color: rgba(0,0,0,.87); margin-right: 0px;" class="item">
                            <i class="wikipedia icon"></i> 转为博文
                        </a>
                        <div class="divider"></div>
                        <a href="/admin/chat/${isAt ? 'direct' : 'channel'}/download/${item.id}?type=pdf"
                            style="display: block; color: rgba(0,0,0,.87); margin-right: 0px;" class="item">
                            <i class="file pdf outline icon"></i> 导出为PDF
                        </a>
                        <a href="/admin/chat/${isAt ? 'direct' : 'channel'}/download/${item.id}?type=md"
                            style="display: block; color: rgba(0,0,0,.87); margin-right: 0px;" class="item">
                            <i class="file text outline icon"></i> 导出为Markdown
                        </a>
                        <div click.delegate="md2HtmlDownloadHandler(item)" class="item">
                            <i class="html5 icon"></i> 导出为HTML
                        </div>
                        <div if.bind="item.creator.username == loginUser.username" class="divider"></div>
                        <div class="item tms-red" if.bind="item.creator.username == loginUser.username"
                            click.delegate="deleteHandler(item)" title="删除消息"><i class="trash outline icon"></i> 删除
                        </div>
                    </div>
                </div>
            </div>
            <a class="chat-topic-repies" if.bind="!isAt && item.chatReplies && item.chatReplies.length > 0"
                click.delegate="talkHandler(item, $event)">
                <i class="large talk outline icon link"></i>
                <span class="reply">${item.chatReplies.length} 回复</span>
                <span class="timeago">${item.chatReplies[item.chatReplies.length - 1].creator.name} 最后回复于 <span
                        class="date" data-timeago="${item.chatReplies[item.chatReplies.length - 1].updateDate}"
                        title="${item.chatReplies[item.chatReplies.length - 1].updateDate | date}">${tem.chatReplies[item.chatReplies.length
                        - 1].updateDate | timeago}</span></span>
                <span class="view">查看回复</span><span class="newest"><i
                        class="quote left icon"></i>${item.chatReplies[item.chatReplies.length - 1].content}<i
                        class="quote right icon"></i></span>
            </a>
            <div if.bind="item._show && item._hovered" class="tools">
                <button show.bind="!isAt && !item.isEditing" click.delegate="refreshHandler(item)" title="刷新同步"
                    class="mini circular ui icon button">
                    <i class="refresh icon"></i>
                </button>
            </div>
        </div>
        <em-chat-content-item-footbar if.bind="!item.isEditing && (item._show)" chat.bind="item" last.bind="$last"
            last-pre.bind="(chats.length > 1) && ($index == chats.length - 2)"></em-chat-content-item-footbar>
    </div>
    <em-confirm-modal em-confirm-modal.ref="emConfirmModal"></em-confirm-modal>
</template>
